<template>
  <a :href="url" class="nav-link">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot v-bind:user="user">{{ user.lastName }}</slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </a>
</template>

<script>
export default {
  name: "navigation-link",
  props: ["url"],
  data: function () {
    return {
      user: {
        lastName: "张",
        person: {
          a: 10,
        },
      },
    };
  },
};
</script>

<style scoped>
.nav-link {
}
</style>
